<template>
  <div class="orderTableList">
    <!-- 订单查询 -->
    <UserSelect @search="reload"></UserSelect>
    <el-card class="box-card"
             shadow="never">
      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     :border="false"
                     :disabled="false"
                     :toolbar="false"
                     cache-key="systemUserTable">
        <!-- 订单信息 -->
        <template v-slot:orderingInformation="{ row }">
          <div class="realNameStyle flex-start-center">
            <img class="avaterName"
                 :src="row.rotationChart"
                 alt="" />
            <span>{{ row.tradeName }}</span>
          </div>
        </template>
        <!-- 用户信息 -->
        <template v-slot:userInformation="{ row }">
          <div class="commentList">
            <img class="avaterImg"
                 :src="row.head"
                 alt="" />
            <div class="commentInfo flex-column-start">
              <div class="nickName">
                <span style="color: #000; font-weight: 400">{{
                  row.technicianName
                }}</span>
                <span v-if="row.gender == 2"
                      class="genderMask">{{
                  row.age
                }}</span>
                <span v-if="row.gender == 1"
                      class="gender">{{ row.age }}</span>
              </div>
              <div class="rate">
                <el-rate v-model="row.scoreTotal"
                         disabled
                         text-color="#ff9900"
                         score-template="{value}">
                </el-rate>
              </div>
            </div>
          </div>
        </template>
        <!-- 服务技师 -->

        <template v-slot:serviceTechnician="{ row }">
          <div class="realNameStyle flex-start-center">
            <img class="avaterImg"
                 :src="row.avatar"
                 alt="" />

            <el-link :underline="false"
                     type="primary">
              {{ row.nickname }}
            </el-link>
          </div>
        </template>
        <!-- 是否展示 -->

        <template v-slot:disbursements="{ row }">
          <div>￥{{row.disbursements  }}元</div>
        </template>
        <template v-slot:showOrNot="{ row }">
          <el-switch :active-value="1"
                     :inactive-value="2"
                     v-model="row.showOrNot"
                     @change="editStatus(row)" />
        </template>

        <!-- 展开内容 -->
        <template v-slot:expand="{ row }">
          <div class="commentList">
            <img class="avaterImg"
                 :src="row.avatar"
                 alt="" />
            <div class="commentInfo">
              <div class="nickName">
                <span style="color: #000; font-weight: 400">{{
                  row.nickname
                }}</span>
                <!-- <span v-if="row.gender==2"
                      class="genderMask">{{ row.age }}</span>
                <span v-if="row.gender==1"
                      class="gender">{{ row.age }}</span> -->

                <span class="createTime">{{ row.createdDate }}</span>
                <el-rate v-model="row.score"
                         disabled
                         text-color="#ff9900"
                         score-template="{value}">
                </el-rate>
              </div>
              <div class="textComment font-overflow">
                {{ row.technicianEvaluation }}
              </div>
              <!-- 评论标签 -->
              <div class="commentTag"
                   v-if="row.evaluationKeywords">
                <el-tag v-for="(item, i) in row.evaluationKeywords"
                        :key="i"
                        type="success"
                        icon="el-icon-delete">{{ item }}</el-tag>
                <!-- <el-tag type="success"
                        icon="el-icon-delete">服务超级好</el-tag> -->
              </div>

              <div class="flex-start-center-wrap">
                <div class="demo-image__preview maginRight10"
                     v-for="(src, i) in row.picture"
                     :key="i">
                  <el-image style="width: 100px; height: 100px"
                            :src="src"
                            :preview-src-list="row.picture">
                  </el-image>
                </div>
              </div>
            </div>
          </div>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>
<script>
import UserSelect from './user-search.vue';
import {
  getEvaluationList,
  getEvaluationHead,
  evaluationModify
} from '@/api/orderManagement/evaluateList';

import { orderTableList } from '../constant/constant';
export default {
  name: 'orderTableList',
  components: { UserSelect },
  data () {
    return {
      orderTableList,
      //  技能评分
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      value: 4,
      // 表格列配置
      columns: [
        {
          width: 45,
          type: 'expand',
          columnKey: 'expand',
          align: 'center',
          slot: 'expand'
        },
        // {
        //   columnKey: 'selection',
        //   type: 'selection',
        //   width: 45,
        //   align: 'center',
        //   fixed: 'left'
        // },

        {
          prop: 'orderingInformation',
          label: '订单信息',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'orderingInformation'
        },
        {
          prop: 'userInformation',
          label: '技师信息',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          slot: 'userInformation'
        },
        {
          prop: 'disbursements',
          label: '实付价格',
          sortable: 'custom',

          showOverflowTooltip: true,
          minWidth: 60,
          slot: 'disbursements'
        },

        {
          prop: 'serviceTechnician',
          label: '用户信息',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'serviceTechnician'
        },
        {
          prop: 'showOrNot',
          label: '是否显示',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          slot: 'showOrNot'
        },
        {
          prop: 'createdDate',
          label: '评价时间',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue, 'yyyy-MM-dd HH:mm');
          }
        }


      ],
      // 表格选中数据
      selection: []
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    // 服务状态
    serviceStatusType () {
      return function (serviceType) {
        // console.log(applyType)
        if (serviceType == '1') {
          return {
            status: '可服务',
            type: ''
          };
        } else if (serviceType == '2') {
          return {
            status: '服务中',
            type: 'success'
          };
        } else if (serviceType == '3') {
          return {
            status: '已冻结',
            type: 'danger'
          };
        } else {
          return {
            status: '离线中',
            type: 'info'
          };
        }
      };
    },

    // 实名认证
    informationType () {
      return function (informationType) {
        if (informationType == '1') {
          return {
            status: '买家已经付款',
            type: 'success'
          };
        } else if (informationType == '2') {
          return {
            status: '买家申请退款',
            type: 'danger'
          };
        } else {
          return {
            status: '认证中',
            type: 'info'
          };
        }
      };
    }
  },
  activated () {
    this.reload()
  },
  methods: {
    // 点击查看详情弹出详情抽屉
    viewDetail () {
      // 用户余额管理
      this.drawer = !this.drawer;
      // 评论
      //   this.drawComment = !this.drawComment
    },
    /* 更改状态 */
    editStatus (row) {
      const loading = this.$loading({ lock: true });
      evaluationModify({ id: row.id, showOrNot: row.showOrNot })
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          row.status = !row.status ? 1 : 2;
          this.$message.error(e.message);
        });
    },

    /* 表格数据源 */
    async datasource ({ page, limit, where, order }) {
      if (!where.deleted)
        // return Promise.resolve({ count: 2, list: orderTableList });

        var res = await getEvaluationList({
          page,
          limit,
          ...where,
          siteId: this.$store.state.site.info.id
        });

      res.list.forEach((item) => {
        if (item.evaluationKeywords?.length) {
          if (item.evaluationKeywords.includes(',')) {
            console.log('字符串中包含逗号');
            // 包含的进行slice(',') 分割
            item.evaluationKeywords = item.evaluationKeywords
              .split(',')
              .map((item) => item.trim());
            if (item.evaluationKeywords[item.evaluationKeywords.length - 1] == '') {
              item.evaluationKeywords.pop()
            }
          } else {
            console.log('字符串中不包含逗号');
            item.evaluationKeywords = item.evaluationKeywords.split();
            if (item.evaluationKeywords[item.evaluationKeywords.length - 1] == '') {
              item.evaluationKeywords.pop()
            }
          }
        }
        if (item.picture?.length) {
          if (item.picture.includes(',')) {
            console.log('字符串中包含逗号');
            // 包含的进行slice(',') 分割
            item.picture = item.picture.split(',').map((item) => item.trim());
          } else {
            console.log('字符串中不包含逗号');
            item.picture = item.picture.split();
          }
        }

        item.scoreTotal = Math.floor(item.scoreTotal * 10) / 10;
      });
      console.log(res);
      return res;
    },
    /* 刷新表格 */
    reload (where) {

      this.$refs.table.reload({ page: 1, where: where });
    },

    /* 删除 */
    remove (row) {
      const loading = this.$loading({ lock: true });
      mealDelete({ ids: [row.id] })
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的套餐吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          removeMeal({ ids: this.selection.map((d) => d.id) })
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    }
  }
};
</script>
<style lang="less" scoped>
.orderTableList {
  .realNameStyle {
    .avaterName {
      width: 74px;
      height: 74px;

      vertical-align: middle;
      margin-right: 5px;
      border-radius: 10px;
    }
    .avaterImg {
      width: 46px;
      height: 46px;
      border-radius: 46px;
      margin-right: 10px;
    }
    .technicianName {
      color: #1890ff;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }
  }

  .commentList {
    display: flex;
    padding: 14px 0;

    margin: 0 20px;
    .avaterImg {
      width: 46px;
      height: 46px;
      border-radius: 46px;
      margin-right: 10px;
    }
    .commentInfo {
      width: 100%;

      .nickName {
        .genderMask {
          width: 41px;
          height: 17px;
          background-color: #fd73a5;
          font-size: 12px;
          font-weight: 400;
          border-radius: 22px;
          display: inline-block;
          color: #fff;
          text-align: center;
          padding-right: 6px;
          line-height: 18px;
          margin-left: 10px;
          vertical-align: text-bottom;
          &::before {
            content: url('../../../../static/svg/girl.svg');
            display: inline-block;
            vertical-align: text-top;
          }
        }
        .gender {
          width: 41px;
          height: 17px;
          background-color: #1890ff;
          font-size: 12px;
          font-weight: 400;
          border-radius: 22px;
          display: inline-block;
          color: #fff;
          text-align: center;
          padding-right: 6px;
          line-height: 18px;
          margin-left: 10px;
          vertical-align: text-bottom;
          &::before {
            content: url('../../../../static/svg/Group\ 3236.svg');
            display: inline-block;
            vertical-align: text-top;
          }
        }
        .createTime {
          margin-left: 10px;

          color: #999;
          font-size: 14px;
        }
      }

      .textComment {
        color: #000;
        margin: 10px 0;
        font-size: 14px;
        width: 85%;
      }
      .commentTag {
        margin: 8px 0;
      }
      .maginRight10 {
        margin-right: 10px;
      }
    }
  }
}
</style>
